<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script src="scripts/Login.js"></script>
        <script src="scripts/closepopover.js"></script>

        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />
    </head>
    <body>
        <div data-role="view" id="login-screen" data-title="CCN FWB/FOH Matching">
            <img src="styles/img/ccn_logo1.jpg" id="LoginLogo"/>
            <form id="LoginForm">
                <div>
                    CompanyID:
                    <input type="text" class="LoginElement" maxlength="12" pattern="\d{12}" name="CoID" id="CoID"/>
                </div>
                <div>
                    UserID:
                    <input type="text" class="LoginElement" maxlength="12" pattern="\d{12}" name="UserID" id="UserID"/>
                </div>
                <div>
                    Password:
                    <input type="password" class="LoginElement" maxlength="10" name="PW" id="PW"/>
                </div>
                <div class="LoginOption"><input type="checkbox"/>Remember Me</div>
                <div class="LoginOption"><a href="">Forgot Password?</a></div>
                
                <a class="button" data-role="button" id="LoginButton" onclick="login()">Login</a>

            </form>
        </div>
        
        <div data-role="view" id="summary-screen" data-title="CCN FWB/FOH Matching" data-layout="mobile-tabstrip">
            <div data-role="scroller">
           
                <div id='search-box'>
                    <form action='/search' id='search-form' method='get' target='_top'>
                    <input id='search-text' name='q' placeholder='Search...' type='text'/>
                    <button id='search-button' type='submit'><span>Search</span></button>
                    </form>
                </div>
                
                <ul data-role="buttongroup" data-index="0" id="status-field">
                    <li>New</li>
                    <li>Sent</li>
                    <li>Ack</li>
                </ul>
                
                <div id="summary-top">
                    <a data-role="button" data-theme="b" data-inline="true" class="summary-button" style="background-color:rgb(50,104,195)">Select All</a>
                    <a data-role="button" data-theme="b" data-inline="true" class="summary-button" style="background-color:rgb(50,104,195)">Resend FWB</a>
                </div>
                
                <ul data-role="listview" id="summaryview">
                    <li><a class="summary-element" href="#detail-screen"><span class="awb-number">If I Could</span><span class="fwb">FWB: 10/200K</span><span class="foh">FOH: 30/100K</span><span class="time-date">Time</span><span class="status">New</span></a></li>
                    <li><a class="summary-element"><span class="awb-number">Write You A Song</span><span class="fwb">FWB: 10/200K</span><span class="foh">FOH: 30/100K</span><span class="time-date">Time</span><span class="status">New</span></a></li>
                    <li><a class="summary-element"><span class="awb-number">To Make You</span><span class="fwb">FWB: 10/200K</span><span class="foh">FOH: 30/100K</span><span class="time-date">Time</span><span class="status">New</span></a></li>
                    <li><a class="summary-element"><span class="awb-number">Fall in Love</span><span class="fwb">FWB: 10/200K</span><span class="foh">FOH: 30/100K</span><span class="time-date">Time</span><span class="status">New</span></a></li>
                    <li><a class="summary-element"><span class="awb-number">Then I'd Already</span><span class="fwb">FWB: 10/200K</span><span class="foh">FOH: 30/100K</span><span class="time-date">Time</span><span class="status">New</span></a></li>
                    <li><a class="summary-element"><span class="awb-number">Have You Right</span><span class="fwb">FWB: 10/200K</span><span class="foh">FOH: 30/100K</span><span class="time-date">Time</span><span class="status">New</span></a></li>
                    <li><a class="summary-element"><span class="awb-number">Under My Arm</span><span class="fwb">FWB: 10/200K</span><span class="foh">FOH: 30/100K</span><span class="time-date">Time</span><span class="status">New</span></a></li>
                </ul>
                
                
            </div>
        </div>
        
        <div data-role="view" id="detail-screen" data-title="CCN FWB/FOH Matching" data-layout="detail-tabstrip">
            
            <ul data-role="listview" data-style="inset" data-type="group" style="margin-top:12%;">
                <li>
                    FWB/FOH
                    <ul style="font-size:15px; text-align:justify">
                         <li><div style="width:96%">FOH: <span style="margin-left:0.5em">Pcs:20</span><span style="margin-left:0.5em">Wt:100K</span></div></li>
                        <li><a data-rel="popover" href="#popover-detail"><div style="width:94%">FWB: <span style="margin-left:0.5em" id="changepcs">Pcs:1000</span><span style="margin-left:0.5em"id="changewt">Wt:40K</span></div></a></li>
                    </ul>
                </li>
                <li>
                    Current Information
                    <ul>
                        <li style="font-size: 25px; text-align:justify">AWB No: 123-345678</li>
                        <li style="font-size: 12.5px">Time: 6:05 PM<span style="margin-left: 6.5em">Date: 12/06/2013</span></li>

                    </ul>
                </li>
                
            </ul>
            <div data-role="popover" id="popover-detail" data-popup='{"height": "8em", "width":"16em"}'>
                <div data-role="view" data-title="Change FWB">
                    <div data-role="header" style="font-size: 11px">
                        <div data-role="navbar">
                            <span data-role="view-title"></span>
                            <a data-role="button" data-align="right" data-click="closeParentPopover" style="font-size:12px; margin-top:-0.05em; margin-right:-0.1em">Confirm</a>
                        </div>
                    </div>
                    <div class="popoverelement">Pieces: <input type="text" id="Pcs"></div>
                    <div class="popoverelement">Weight: <input type="text" id="Wt"><span><select id="unit" style="font-size:18px"><option> </option><option>K</option></select></span></div>
                </div>
            </div>
            <div id="detail-button">
                    <a data-role="button" data-inline="true" class="detail-button">Confirm</a>
                    <a data-role="button" data-inline="true" class="detail-button">Resend FWB</a>
            </div>
        </div>


        

        <div data-role="layout" data-id="detail-tabstrip">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                    <a data-role="backbutton" data-align="left" href="#summary-screen" style="font-size:10px;margin-left:-1.6em;margin-top:1.1em">Back</a>
                </div>
            </header>

            <div data-role="footer">
                <div data-role="tabstrip">
                    <a href="#login-screen" data-icon="home">Login</a>
                    <a href="#summary-screen" data-icon="share">Summary Screen</a>
                    <a href="#detail-screen" data-icon="globe">Detail Screen</a>
                </div>
            </div>
        </div>
        
        <div data-role="layout" data-id="mobile-tabstrip">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>

            <div data-role="footer">
                <div data-role="tabstrip">
                    <a href="#login-screen" data-icon="home">Login</a>
                    <a data-icon="share">Summary Screen</a>
                    <a data-icon="globe">Detail Screen</a>
                </div>
            </div>
        </div>
        
        

        <script>
            var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
        </script>
    </body>
</html>
